<template>
  <div>
    <!-- 顶部导航栏组件 -->
    <van-nav-bar title="京东注册" @click-left="onClickLeft">
      <template #left>
        <img
          src=""
          class="nav-arrow"
        />
      </template>
    </van-nav-bar>

    <!-- 注册表单 -->
    <van-form @submit="onSubmit">
      <van-field
        v-model="username"
        name="username"
        label="手机号"
        label-width="60"
        placeholder="请填写手机号"
        :rules="[
          {
            required: true,
            pattern: mobileP,
            message: '请填写正确的11位手机号',
          },
        ]"
        @input="mobInput"
      />

      <van-field
        v-model="password"
        type="password"
        name="password"
        label="密 码"
        label-width="60"
        placeholder="6~12位，包含字母数字下划线"
        :rules="[
          { required: true, pattern: passwordP, message: '请正确填写密码' },
        ]"
        @input="pwdInput"
      />
      <div style="margin: 16px">
        <van-button
          round
          block
          type="info"
          native-type="submit"
          :color="btnColor"
          >注册</van-button
        >
      </div>
    </van-form>
  </div>
</template>

<script>
// 引入 顶部导航栏 组件
import Vue from "vue";
import { NavBar } from "vant";
Vue.use(NavBar);

// 引入表单组件
import { Form } from "vant";
Vue.use(Form);

import { Field } from "vant";
Vue.use(Field);

import { Button } from "vant";
Vue.use(Button);

import { Toast } from "vant";
Vue.use(Toast);

export default {
  data() {
    return {
      // 手机号
      username: "",
      // 密码
      password: "",
      // 按钮颜色
      btnColor: "linear-gradient(90deg, #fab3b3, #ffbcb3 73%, #ffcaba)",
      // 手机号正则
      mobileP: /^1[3456789]\d{9}$/,
      // 密码正则
      passwordP: /^\w{6,12}$/,
      // 手机号验证结果
      mobVer: false,
      // 密码验证结果
      pwdVer: false,
    };
  },
  methods: {
    onSubmit(values) {
      // 当验证通过时才成功发起请求
      if (this.mobVer && this.pwdVer) {
        this.$http
          .post("http://42.193.117.107:3000/sql/reg", values)
          .then((res) => {
            // console.log(res);
            if (res.type === "apiserve") {
              // 请求成功跳转到登录页面
              Toast.success(res.msg);
              let t1 = setTimeout(() => {
                // 跳转到登录页面
                console.log(this,"denglu");
                this.$router.push("/login");
                clearInterval(t1);
              }, 2100);
            } else {
              Toast.fail(res.msg);
              let t2 = setTimeout(() => {
                // 清空输入框内容
                this.username = "";
                this.password = "";
                clearInterval(t2);
              }, 2100);
            }
          });
      }
    },
    // 手机号输入事件
    mobInput(val) {
      if (this.mobileP.test(val)) {
        this.mobVer = true;
      } else {
        this.mobVer = false;
      }
    },
    // 密码输入事件
    pwdInput(val) {
      if (this.passwordP.test(val)) {
        this.pwdVer = true;
      } else {
        this.pwdVer = false;
      }
    },
    // 返回上一页
    onClickLeft() {
      this.$router.back();
    },
  },
  beforeUpdate() {
    // 当验证都通过时，改变按钮颜色
    if (this.mobVer && this.pwdVer) {
      this.btnColor = "linear-gradient(90deg,#f10000,#ff2000 73%,#ff4f18)";
    } else {
      this.btnColor = "linear-gradient(90deg, #fab3b3, #ffbcb3 73%, #ffcaba)";
    }
  },
  created() {
    this.$store.commit("setIsShow", false);
  },
  beforeDestroy() {
    this.$store.commit("setIsShow", true);
  },
};
</script>

<style scoped>
.nav-arrow {
  width: 24px;
}
.van-nav-bar__left {
  padding-left: 25px;
}
.van-nav-bar__title {
  font-size: 17px;
}
.van-form {
  padding: 25px;
  margin-top: 20px;
}
.van-cell {
  font-size: 16px;
  /* padding: 0; */
  line-height: 40px;
}
.van-field__label {
  width: 60px;
}
.van-cell::after {
  border-bottom: 1px solid #e1e1e1;
}
.van-button {
  margin-top: 40px;
  height: 50px;
}
.van-button--info {
  border: none;
  font-size: 18px;
  font-weight: 700;
  background-color: transparent;
  box-shadow: 0 0.1rem 20px 0 rgb(255 62 62 / 20%);
}
.van-field__label:nth-child(2) {
  background-color: #111;
}
.password {
  letter-spacing: 14px;
}
.van-field__error-message {
  font-size: 16px;
}
</style>